<template>
    <div class="invoice-add">
        <!-- 顶部导航栏 -->
        <van-nav-bar
            title="新增发票抬头"
            right-text="保存"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />

        <transition-group name="van-fade">
            <!-- 抬头类型 -->
            <van-field key="type" label="抬头类型">
                <template #input>
                    <van-tag
                        plain
                        :type="invoice.type === type ? 'primary' : 'default'"
                        v-for="(type, index) in typeArr"
                        :key="index"
                        @click="handleSwitchType(type)"
                        >{{ type }}</van-tag
                    >
                </template>
            </van-field>

            <!-- 抬头名称 -->
            <van-field
                key="name"
                v-model="invoice.name"
                label="抬头名称"
                placeholder="必填，公司名称"
            />

            <!-- 税号 -->
            <van-field
                key="sno"
                v-if="invoice.type !== '个人'"
                v-model="invoice.sno"
                right-icon="question-o"
                label="税号"
                placeholder="必填，公司名称"
            />

            <!-- 邮箱 -->
            <van-field
                key="email"
                v-model="invoice.email"
                label="邮箱"
                placeholder="请填写常用邮箱（选填）"
            />

            <!-- 需要增值税专用发票 -->
            <van-field
                key="is_zy"
                v-if="invoice.type !== '个人'"
                label="需要增值税专用发票"
                label-width="140"
                input-align="right"
            >
                <template #input>
                    <van-switch v-model="invoice.is_zy" size="20" />
                </template>
            </van-field>

            <!-- 设置为默认发票 -->
            <van-field
                key="is_default"
                label="设置为默认发票"
                label-width="140"
                input-align="right"
            >
                <template #input>
                    <van-switch v-model="invoice.is_default" size="20" />
                </template>
            </van-field>
        </transition-group>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            typeArr: ["企业", "非企业性单位", "个人"],
            invoice: {
                type: "企业",
                name: "",
                sno: "",
                email: "",
            },
        };
    },

    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            const params = JSON.parse(JSON.stringify(this.invoice));
            params.is_zy = params.is_zy ? 1 : 0;
            params.is_default = params.is_default ? 1 : 0;
            // 邮箱格式校验
            if (params.email && !/^\w+@[0-9a-z]+\.com$/.test(params.email)) {
                this.$toast({ type: "fail", message: "请输入正确的邮箱" });
                return;
            }
            // console.log("params", params);
            axios.post("/invoices", params).then((data) => {
                console.log("data", data);
            });
        },
        handleSwitchType(type) {
            this.invoice.type = type;
        },
    },
};
</script>

<style lang="less">
.invoice-add {
    background-color: #f5f5f5;
    height: 100vh;

    .van-field {
        margin-top: 5px;
    }

    .van-tag {
        padding: 3px 6px;
        font-size: 14px;
        margin-right: 15px;
    }
}
</style>
